<template>
    <div class="toolDiv">
        <div class="searchDiv">
            <input type="text" v-model="inputValue">
            <button class="searchBtn" @click="searchBtn">搜索</button>
        </div>

        <div class="contentDiv">
            <!-- 外层：分类卡片 -->
            <div class="divList" v-for="(item, index) in uniqueTitles" :key="index">
                <span>{{ item }}</span>

                <!-- 内层：该分类下的工具 -->
                <div class="items" v-for="item1 in toolsMap[item]" :key="item1.id">
                    <a class="item" :href="item1.url" target="_blank"> {{ item1.name }}</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { selectAllTool, selectByTitle } from '@/api/front/tool.js'

const inputValue = ref("")
const uniqueTitles = ref([])
const toolsMap = ref({})


const onLoadData = async () => {
    const { data: res } = await selectAllTool()
    if (res.code === '200') {
        const titles = [...new Set(res.data.map(item => item.title).filter(Boolean))]
        uniqueTitles.value = titles

        // 并发获取每个 title 的工具
        const promises = titles.map(async title => {
            const { data: r } = await selectByTitle(title)
            return { title, tools: r.code === '200' ? r.data : [] }
        })

        const results = await Promise.all(promises)
        toolsMap.value = Object.fromEntries(
            results.map(r => [r.title, r.tools])
        )

        console.log(toolsMap.value)

    }
}

onMounted(onLoadData)


// 重新刷新获取数据比起操作DOM更省力
const searchBtn = async function () {
    const { data: res } = await selectAllTool({ name: inputValue.value })
    if (res.code === '200') {
        const titles = [...new Set(res.data.map(item => item.title).filter(Boolean))]
        uniqueTitles.value = titles

        // 并发获取每个 title 的工具
        const promises = titles.map(async title => {
            const { data: r } = await selectByTitle(title)
            return { title, tools: r.code === '200' ? r.data : [] }
        })

        const results = await Promise.all(promises)
        toolsMap.value = Object.fromEntries(
            results.map(r => [r.title, r.tools])
        )
    }

}

// const searchBtn = function () {
//     if (inputValue.value.trim() === '') {
//         console.log("没有内容")
//         onLoadData()
//         return
//     }
//     //这里不采用数据更新，而是采用节点操作。
//     const divLists = document.querySelectorAll(".divList")
//     const divListsParent = document.querySelector(".contentDiv")
//     console.log(divListsParent)
//     const arrayNode = []
//     console.log(inputValue.value)
//     //首先先筛选出列表元素下的子节点
//     divLists.forEach((item, index) => {
//         const itemNodes = item.querySelectorAll(".item")
//         itemNodes.forEach((item1, index1) => {
//             if (item1.innerHTML.includes(inputValue.value)) {
//                 const searchItemParent = item1.parentElement.parentElement
//                 arrayNode.push(searchItemParent)
//             }
//         })
//     })
//     console.log(arrayNode)
//     divListsParent.innerHTML = ""
//     //筛选出子节点下的列表元素节点
//     arrayNode.forEach((item, index) => {
//         divListsParent.appendChild(item)
//         item.querySelectorAll(".item").forEach((item1,index1)=>{
//             if(!item1.innerHTML.includes(inputValue.value)){
//                 item1.remove()
//             }
//         })
//     })
// }
</script>
<style>
.toolDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.searchDiv {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 100px;
    font-size: 20px;
}

.searchDiv input {
    font-size: 32px;
    height: 2rem;
    width: 60%;
}

.searchBtn {
    width: 20%;
}

.contentDiv {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* 关键：允许换行 */
    gap: 5%;
    /* 可选：控制间距 */
    margin-top: 50px;
    width: 100%;
}

.divList {
    border: 1px solid black;
    width: 25%;
    /* 每行最多 3 个（30% × 3 = 90%） */
    margin-bottom: 10px;
    /* 可选：纵向间距 */
    padding: 25px;
    letter-spacing: 3px;
    margin: 10px auto;
    background-color: #ccc;
}
.divList span{
    font-size: 16px;
}
.item{
}
</style>